
<%@ page isELIgnored="false" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<html>
<link rel="stylesheet" href="<%=basePath%>/resources/bootstrap.min.css"/>
<link rel="stylesheet" href="<%=basePath%>/resources/font-awesome.min.css"/>

<head>
    <title>客户列表页面</title>
</head>
<body>
<!-- 导航栏 -->
<div class="sidebar text-left">
    <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand">后台数据管理系统</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li><a href="<%=basePath%>/customer/toSavePage"><strong>添加信息</strong></a></li>
                    <li><a href="<%=basePath%>/customer/toListPage"><strong>用户列表</strong></a></li>
                    <li><a>欢迎您：${sessionScope.admin.adminName}</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>
<br/>
<div class="container" style="margin-top:66px;">
    <h1 class="text-center">客户列表信息详情页面</h1>
    <hr/>
    <br/>
    <form class="form-inline" action="<%=basePath%>/customer/findByPage" method="post">
        <div class="form-group">
            <label>客户姓名：</label>
            <input type="text" class="form-control" name="c_name"/>
        </div>
        &nbsp;&nbsp;
        &nbsp;&nbsp;
        <div class="form-group">
            <label>客户电话</label>
            <input type="text" class="form-control" name="c_telephone"/>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;
        <div class="form-group">
            <input type="submit" value="查询" class="form-control btn btn-info"/>
            &nbsp;&nbsp;
           <input type="reset" value="重置" class="form-control btn btn-danger"/>
        </div>
    </form>
    <br/>
    <hr/>
    <div class="table-responsive">
        <table class="table table-hover table-striped">
            <thead>
            <tr>
                <th style="text-align: center;">客户编号</th>
                <th style="text-align: center;">客户姓名</th>
                <th style="text-align: center;">客户电话</th>
                <th style="text-align: center;">客户地址</th>
                <th style="text-align: center;">客户备注</th>
                <th style="text-align: center;">操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${requestScope.customersList}" var="customer">
                <tr class="text-center">
                    <td>${customer.c_id}</td>
                    <td>${customer.c_name}</td>
                    <td>${customer.c_telephone}</td>
                    <td>${customer.c_address}</td>
                    <td>${customer.c_remark}</td>
                    <td>

                        <script type="text/javascript">
                            var c_id = "${customer.c_id}";
                            console.log("tset"+c_id);
                        </script>
                        <a href="#" onclick="return edit(${customer.c_id})" style="text-decoration: none;">
                            <input type="button" value="修改">
                        </a>
                        &nbsp;&nbsp;
                        <a href="#" onclick="return trash(${customer.c_id})" style="text-decoration: none;" data-toggle="modal" data-target="#trashModal">
                            <input type="button" value="删除">
                        </a>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>


   <!-- 编辑的模态框 -->
    <form class="form-horizontal" role="form" method="post" action="<%=basePath%>/customer/update"
          id="form_edit">
        <div class="modal fade" id="editModal" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">修改客户信息</h4>
                    </div>
                    <div class="modal-body" style="margin-left: 80px;">
                        <div hidden="hidden">
                            <input type="text" name="c_id" class="form-control" id="c_id"/>
                        </div>
                        <div class="form-group form-inline">
                            <label>客户姓名：</label>
                            <input type="text" name="c_name" class="form-control" id="c_name"/>
                        </div>
                        <br/>
                        <br/>
                        <div class="form-group form-inline">
                            <label>客户电话：</label>
                            <input type="text" name="c_telephone" class="form-control" id="c_telephone"/>
                        </div>
                        <br/>
                        <br/>
                        <div class="form-group form-inline">
                            <label>客户住址：</label>
                            <input type="text" name="c_address" class="form-control" id="c_address"/>
                        </div>
                        <br/>
                        <br/>
                        <div class="form-group form-inline">
                            <label>客户备注：</label>
                            <input type="text" name="c_remark" class="form-control" id="c_remark"/>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="editSure btn btn-info" data-dismiss="modal">修改</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
</body>
<script src="<%=basePath%>/resources/jquery-3.3.1.min.js"></script>
<script src="<%=basePath%>/resources/bootstrap.min.js"></script>


 <%--// 编辑信息的方法--%>
<script>
    // 删除信息的方法
    function trash(c_id) {
        if (!c_id) {
            alert("error");
        } else {
                $.ajax({
                    url: "<%=basePath%>/customer/delete?c_id=" + c_id,
                    type: "POST",
                    dataType: "json",
                    data: JSON.stringify({
                        c_id: c_id
                    }),
                    error : function() {
                        alert("删除成功");
                        window.location.reload();
                    },
                });
        }
    }
    //修改信息
    function edit(c_id){
        if(!c_id){
            alert("error");
        }else{
            // 先去查询数据
            $.ajax({
                url: "<%=basePath%>/customer/findById?c_id="+c_id,
                type: "POST",
                dataType: "json",
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify({
                    c_id: c_id
                }),
                success: function(data){
                    $("#c_id").val(data.c_id);
                    $("#c_name").val(data.c_name);
                    $("#c_telephone").val(data.c_telephone);
                    $("#c_address").val(data.c_address);
                    $("#c_remark").val(data.c_remark);
                    $("#editModal").modal('show');
                },
                error: function(){
                    alert("请求错误");
                }
            });
        }
    }

    //提交表单的方法
    $(".editSure").click(function(){
        $("#form_edit").submit();
    });

</script>

</html>
